<template>
  <div class="mainCon">
    <div class="leftCon">
      <el-select v-model="selectValue" placeholder="请选择" clearable class="filter-item" @change="selectChange">
        <el-option v-for="item in projectList" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
      <el-tree :data="treeData" :props="defaultProps" style="margin-top:25px" />
    </div>
    <div v-if="selectValue != ''" class="rightCon">
      <el-button
        class="filter-item"
        style=""
        type="primary"
        icon="el-icon-edit"
      >
        添加设备
      </el-button>
      <el-input
        placeholder="请输入关键字"
        style="width: 200px;margin-left:20px;margin-right:20px"
        class="filter-item"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
        搜索
      </el-button>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="deviceList"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top:25px"
      >
        <el-table-column
          label="设备名称"
          align="center"
        >
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="设备编号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column label="添加时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.updated_at }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button> -->
            <el-button size="mini" type="danger">
              解绑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="page"
        :limit.sync="size"
        @pagination="getDeviceList"
      />

    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import { getProjectList, getAreaList, getAreaBindList } from '@/api/projectManage'
export default {
  name: 'ProjectAreaList',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      tableKey: 0,
      deviceList: null,
      selectValue: '',
      total: 0,
      page: 1,
      size: 10,
      projectList: [],
      treeData: [],
      area_id: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
    this.getProjectAreaList()
  },
  methods: {
    getProjectAreaList() {
      getProjectList().then(data => {
        this.projectList = data.list
      })
    },
    selectChange(value) {
      const params = { project_id: value }
      this.area_id = value
      getAreaList(params).then(data => {
        this.treeData = data.list
      })
      this.getDeviceList()
    },
    getDeviceList() {
      this.listLoading = true

      const bindData = {
        area_id: this.area_id,
        page: this.page,
        size: this.size
      }
      getAreaBindList(bindData).then(data => {
        this.deviceList = data.list
        this.listLoading = false
      })
    }
  }

}
</script>
<style lang="scss">
    .mainCon {
        display: flex;
    }
    .leftCon {
        display: flex;
        flex-direction: column;
        width: 20%;
        padding: 25px;
    }
    .rightCon {
        width: 80%;
        padding: 25px;
    }
</style>
